<!DOCTYPE html>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width,
minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
<html>
<head>
	<title></title>
</head>
<style>
	.chat{
        background: #efefef;
	}
	.daohang{
		padding: 0px;
		display: flex;
		justify-content: space-between;
       
	}
	.jiaotou{
        margin-left: 10px;
        margin-top: 10px;
        text-align: left;

	}
	.lianxiren{
		margin-left: 10%;
        padding-top:15px;
        text-align: center;
        font-weight: bold;
        font-size:20px;
        margin-bottom:10px;
	}
	.more{
		text-align: right;
        margin-right: 10px;
        margin-top: 10px;
	}
	.line{
        width:100%;
        height:1px;
        background:#e6e6e6;
        right:0px;
        bottom:0px;
    }
    .time{
    	text-align: center;
    	margin-top: 4px;
    	font-size: 4px;
    }
    body,h1,h2,h3,h4,p,ul,ol,li,form,button,input,textarea,th,td {
        margin:0;
        padding:0
    }
    body,button,input,select,textarea {
        font:12px/1.5 Microsoft YaHei UI Light,tahoma,arial,"\5b8b\4f53";
        *line-height:1.5;
        -ms-overflow-style:scrollbar
    }
    h1,h2,h3,h4{
        font-size:100%
    }
    ul,ol {
        list-style:none
    }
    a {
     text-decoration:none
    }
    a:hover {
        text-decoration:underline
    }
    img {
        border:0
    }
    button,input,select,textarea {
        font-size:100%
    }
    table {
        border-collapse:collapse;
        border-spacing:0
    }

    /*rem*/
    html {
           font-size:62.5%;
     }
     body {
           font:16px/1.5 "microsoft yahei", 'tahoma';
     }
     body .mobile-page {
           font-size: 1.6rem;
     }

     /*浮动*/
    .fl{
        float: left;
     }
    .fr{
        float: right;
     }
    .clearfix:after{
        content: '';
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
    }

    body{
     background-color: #F5F5F5;
    }
    .mobile-page{
     margin-top: 20px;
     max-width: 600px;
    }
    .mobile-page .admin-img, .mobile-page .user-img{
     width: 45px;
     height: 45px;
    }
    i.triangle-admin,i.triangle-user{
         width: 0;
         height: 0;
         position: absolute;
         top: 10px;
         display: inline-block;
         border-top: 10px solid transparent;
         border-bottom: 10px solid transparent;
    }
    .mobile-page i.triangle-admin{
         left: 4px;
         border-right: 12px solid #fff;
    }
    .mobile-page i.triangle-user{
         right: 4px;
         border-left: 12px solid #9EEA6A;
    }
    .mobile-page .admin-group, .mobile-page .user-group{
     padding: 6px;
     display: flex;
     display: -webkit-flex;
    }
    .mobile-page .admin-group{
     justify-content: flex-start;
     -webkit-justify-content: flex-start;
    }
    .mobile-page .user-group{
     justify-content: flex-end;
     -webkit-justify-content: flex-end;
    }
    .mobile-page .admin-reply, .mobile-page .user-reply{
     display: inline-block;
     padding: 8px;
     border-radius: 4px;
     background-color: #fff;
     margin:0 15px 12px;
    }
    .mobile-page .admin-reply{
     box-shadow: 0px 0px 2px #ddd;
    }
    .mobile-page .user-reply{
     text-align: left;
     background-color: #9EEA6A;
     box-shadow: 0px 0px 2px #bbb;
    }
    .mobile-page .user-msg, .mobile-page .admin-msg{
     width: 75%;
     position: relative;
    }
    .mobile-page .user-msg{
     text-align: right;
    }

</style>
<body>
  <div class="chat">
	<div class="daohang">
		<div class="jiaotou">
			<a href="index.html"><img src="../img/箭头 左 小.png" width="30px" /></a>
		</div>
		<div class="lianxiren">蔡徐坤</div>
		<div class="more">
			<img src="../img/更多.png" width="30px" />
		</div>
	</div>
	<div class="line"></div>
	<div class="time">
		2021年1月1日  上午8:00
	</div>
	<div class="mobile-page">
     <div class="user-group">
          <div class="user-msg">
                <span class="user-reply">你好你好你好你好你好你好你好你好你好</span>
                <i class="triangle-user"></i>
          </div>
        <a href="friend8.html">   <img class="user-img" src="../img/yang.jpg"/></a>
     </div>
     <div class="admin-group">
           <img class="admin-img" src="../img/user2.png"/>
           <div class="admin-msg">
                <i class="triangle-admin"></i>
                <span class="admin-reply">吃了没吃了没吃了没吃了没吃了没吃了没吃了没</span>
           </div>
     </div>
     <div class="user-group">
          <div class="user-msg">
                <span class="user-reply">吃了吃了吃了</span>
                <i class="triangle-user"></i>
          </div>
           <img class="user-img" src="../img/user.png"/>
     </div>
     <div class="admin-group">
           <img class="admin-img" src="../img/user2.png"/>
           <div class="admin-msg">
                <i class="triangle-admin"></i>
                <span class="admin-reply">哈哈哈哈哈哈</span>
           </div>
     </div>
    </div>
  </div>
</body>
</html>